<template>
    <div id="article_list">
        <el-form :inline="true" size="medium">
			<el-form-item>
				<el-select v-model="params.type" placeholder="选择文章类型" @change="search" clearable>
					<el-option
					v-for="item in typeList"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.status" placeholder="选择上架状态"  @change="search" clearable>
					<el-option label="待上架" value="0"></el-option>
					<el-option label="已上架" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker
					@change = 'timeChange'
					v-model="timeArr"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button @click="$router.push('/article/detail')">添加文章</el-button>
			</el-form-item>
			
		</el-form>

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column
				prop="title"
				fixed
				align="center"
				label="标题">
			</el-table-column>
			<el-table-column
				prop="summary"
				align="center"
				show-overflow-tooltip
				label="摘要">
			</el-table-column>
			<el-table-column
				prop="type"
				align="center"
				label="类型">
                <template slot-scope="scope">
					<p>{{typeList[scope.row.type - 1].label}}</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="status"
				align="center"
				label="类型">
                <template slot-scope="scope">
					<span v-if="scope.row.status === 0" class="gray">待发布</span>
					<span v-if="scope.row.status === 1" >已发布</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="创建时间"
				min-width="110px">
				<template slot-scope="scope">
					<p>{{$moment(scope.row.createTime).format('Y-MM-DD HH:mm')}}</p>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
                    <el-button v-if="scope.row.status == 0" size="small" @click="setStatus(scope.row.id, 1)" type="primary">上架</el-button>
                    <el-button v-if="scope.row.status == 1" size="small" @click="setStatus(scope.row.id, 0)" type="danger">下架</el-button>
					<el-button size="small" @click="$router.push('/article/detail?id='+scope.row.id)">详情</el-button>
					<el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			class="page"
			background
			@size-change="handleSizeChange" 
			@current-change="getList" 
			:current-page.sync="params.pageNo" 
			:page-sizes="[10, 20, 50, 100]" 
			:page-size="params.pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
		</el-pagination>

        <el-dialog 
		:title="formData.id?'修改文章':'添加文章'" 
		width="400px" 
		center  
		:visible.sync="dialogVisible">
			<el-form :model="formData" :rules="rules" ref="formData" label-width="80px">
				<el-form-item prop="type" label="文章类型">
					<el-select v-model="formData.type" placeholder="选择文章类型" @change="search">
                        <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
				</el-form-item>
				<el-form-item prop="title" label="标题">
					<el-input v-model="formData.title" placeholder="请输入标题" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="summary" label="摘要">
					<el-input v-model="formData.summary" placeholder="请输入摘要" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="status" label="是否上架">
					<el-radio-group v-model="formData.status">
                        <el-radio label="0">暂不上架</el-radio>
                        <el-radio label="1">现在上架</el-radio>
                    </el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            params: {
                pageNo: 1,
                pageSize: 10,
                isCount: true,
                type: '',
                status: ''
            },
            selectData: [],
            typeList: [
                {
                    value: '1',
                    label: '系统公告'
                },
                {
                    value: '2',
                    label: '新闻资讯'
                },
                {
                    value: '3',
                    label: '行业资讯'
                },
                {
                    value: '4',
                    label: '常见问题'
                },
                {
                    value: '5',
                    label: '关于我们'
                },
                {
                    value: '6',
                    label: '代发指南'
				},
				// {
                //     value: '7',
                //     label: '分站与API'
                // },
            ],
			list: [],
			timeArr: [],
            total: 0,
            loading: false,
            dialogVisible: false,
            formData: {
                type: '',
                title: '',
                summary: '',
                status: '0'
            },
            rules: {}
        }
    },
    created(){},
    mounted(){
        this.search();
    },
    watch: {},
    methods: {
		del(row){
			this.$confirm('此操作将永久删除文章, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$request.post({
					url: '/ad/article/delete',
					params: {
						id: row.id
					},
					success: res => {
						this.$message.success('操作成功！')
						this.getList()
					}
				})
			}).catch(() => {
				this.$message.defaultMsg('取消删除')          
			});
		},
		timeChange(val){
			if(val){
				this.params.startTime = this.$common.getDate(val[0]);
				this.params.endTime = this.$common.getDate(val[1]);
			}else{
				this.params.startTime = ''
				this.params.endTime = ''
			}
		},
        handleSizeChange(value) {
            this.params.pageSize = value 
            this.search()
        },
        
        search(){
            this.params.pageNo = 1
            this.params.isCount = true 
            this.getList();
        },
        
        getList() {
            this.loading = true
            this.$request.post({
                url: 'ad/article/list',
                params: this.params,
                success: result =>{
                    this.list = result.list 
                    if(this.params.isCount){
                        this.params.isCount = false 
                        this.total = result.total
                    }
                },
                finally: ()=>{
                    this.loading = false 
                }
            })
        },
		
		setStatus(id, status){
			this.$confirm('确认'+(status == 1 ? '发布' : '下架')+'?', '提示').then(()=>{
				this.$request.post({
					url: 'ad/article/setStatus',
					params: {
						id,
						status
					},
					success: result =>{
						this.$message.success('操作成功')
						this.getList()
					}
				})
			})
		},
    }
}
</script>

<style lang="scss" scoped>
#article_list {
    .page{
		text-align: right;
		margin-top: 20px;
	}
}
</style>